<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>通用增删改查</title>

    <link href="../../../plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../../plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
          rel="stylesheet"/>
    <link href="../../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="../../../plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="../../../plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>

    <link href="../../../css/common.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
    <!--<div id="toolbar">-->
    <!--<a class="waves-effect waves-button" href="javascript:;" onclick="createAction()"><i class="zmdi zmdi-plus"></i>-->
    <!--新增用户</a>-->
    <!--<a class="waves-effect waves-button" href="javascript:;" onclick="updateAction()"><i class="zmdi zmdi-edit"></i>-->
    <!--编辑用户</a>-->
    <!--<a class="waves-effect waves-button" href="javascript:;" onclick="deleteAction()"><i-->
    <!--class="zmdi zmdi-close"></i> 删除用户</a>-->
    <!--</div>-->
    <!--<table id="table"></table>-->


    <div class="jqGrid_wrapper">
        <form class="form-inline" role="form" id="form-summit">
            <div class="form-group">
                <label class="sr-only" for="name">姓名</label>
                <input type="text" class="form-control" id="name" name="name" title="姓名"
                       placeholder="姓名">
            </div>
            <input type="button" onclick='search();' value="查询" class="btn btn-success"/>
            <a class="btn btn-primary" href="/credit/assets/edit.html?id=0"><span
                    class="entypo-plus-squared"></span>&nbsp;&nbsp;新增</a>
        </form>
        <table id="table"></table>
        <div id="pager"></div>
        <!--</div>-->
    </div>
    <!-- 新增 -->
    <div id="createDialog" class="crudDialog" hidden>
        <form>
            <div class="form-group">
                <label for="input1">标题</label>
                <input id="input1" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label for="input2">名称</label>
                <input id="input2" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label for="input3">根目录</label>
                <input id="input3" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label for="input4">图标</label>
                <input id="input4" type="text" class="form-control">
            </div>
        </form>
    </div>
    <script src="../../../plugins/jquery.1.12.4.min.js"></script>
    <script src="../../../plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script src="../../../plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
    <script src="../../../plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../../plugins/waves-0.7.5/waves.min.js"></script>
    <script src="../../../plugins/jquery-confirm/jquery-confirm.min.js"></script>
    <script src="../../../plugins/jqgrid/jquery.jqGrid.minffe4.js?0820" type="text/javascript"></script>
    <script src="../../../plugins/jqgrid/i18n/grid.locale-cnffe4.js?0820" type="text/javascript"></script>


    <script src="../../../js/common.js"></script>
    <script>
        var table = $('#table');


        //    $(function () {
        //        $(document).on('focus', 'input[type="text"]', function () {
        //            $(this).parent().find('label').addClass('active');
        //        }).on('blur', 'input[type="text"]', function () {
        //            if ($(this).val() == '') {
        //                $(this).parent().find('label').removeClass('active');
        //            }
        //        });


        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        //        table.bootstrapTable({
        //            url: '/user/list',
        //            height: getHeight(),
        //            striped: true,
        //            search: true,
        //            searchOnEnterKey: true,
        //            showRefresh: true,
        //            showToggle: true,
        //            showColumns: true,
        //            minimumCountColumns: 2,
        //            showPaginationSwitch: true,
        //            clickToSelect: true,
        //            detailView: true,
        //            detailFormatter: 'detailFormatter',
        //            pagination: true,
        //            paginationLoop: false,
        //            classes: 'table table-hover table-no-bordered',
        //            //sidePagination: 'server',
        //            //silentSort: false,
        //            smartDisplay: false,
        //            idField: 'id',
        //            sortName: 'id',
        //            sortOrder: 'desc',
        //            pageNumber: 1, //当前第几页
        //            pageList: [10, 15, 20, 25],  //记录数可选列表
        //            escape: true,
        //            searchOnEnterKey: true,
        //            idField: 'systemId',
        //            maintainSelected: true,
        //            toolbar: '#toolbar',
        //            columns: [
        //                {field: 'state', checkbox: true},
        //                {field: 'id', title: '编号', sortable: true, halign: 'center'},
        //                {field: 'username', title: '账号', sortable: true, halign: 'center'},
        //                {field: 'password', title: '密码', sortable: true, halign: 'center'},
        //                {field: 'name', title: '姓名', sortable: true, halign: 'center'},
        //                {field: 'sex', title: '性别', sortable: true, halign: 'center'},
        //                {field: 'age', title: '年龄', sortable: true, halign: 'center'},
        //                {field: 'phone', title: '手机', sortable: true, halign: 'center'},
        //                {field: 'email', title: '邮箱', sortable: true, halign: 'center'},
        //                {field: 'address', title: '地址', sortable: true, halign: 'center'},
        //                {field: 'remark', title: '备注', sortable: true, halign: 'center'},
        //                {
        //                    field: 'action',
        //                    title: '操作',
        //                    halign: 'center',
        //                    align: 'center',
        //                    formatter: 'actionFormatter',
        //                    events: 'actionEvents',
        //                    clickToSelect: false
        //                }
        //            ]
        //        }).on('all.bs.table', function (e, name, args) {
        //            $('[data-toggle="tooltip"]').tooltip();
        //            $('[data-toggle="popover"]').popover();
        //        });
        //    });

        $(document).ready(function () {
            init();
        });

        function init() {
            jQuery.jgrid.defaults.styleUI = "Bootstrap";

            jQuery("#table").jqGrid({
                url: '/user/list',//组件创建完成之后请求数据的url
                datatype: "json",//请求数据返回的类型。可选json,xml,txt
                postData: $('#form-summit').serializeArray()[0],
                colNames: ["序号", "姓名", "状态", "操作"],//jqGrid的列显示名字
                colModel: [{name: "id", index: "id", width: 60, sorttype: "int", formatter: typeformatter},
                    {name: "name", index: "name", width: 90},
                    {name: "status", index: "status", width: 90},
                    {
                        formatter: function typeformatter(cellvalue, options, rowObject) {
                            var select = "<input type=\"button\" onclick='del(" + rowObject.id + ");' value=\"删除\" class=\"icon-trash\"/>";
                            return select
                        }
                    }],
                rowNum: 10,//一页显示多少条
                rowList: [10, 20, 30],//可供用户选择一页显示多少条
                pager: '#pager',//表格页脚的占位符(一般是div)的id
                sortname: 'id',//初始化的时候排序的字段
                sortorder: "desc",//排序方式,可选desc,asc
                mtype: "post",//向后台请求数据的ajax的类型。可选post,get
                viewrecords: true,
                caption: "用户列表",//表格的标题名字
                height: 415,
                autowidth: true,
                shrinkToFit: true,
                jsonReader : {
                    root: "data.results",
                    page: "data.page",
                    total: "data.total",
                    records: "data.records"
                },
                onPaging: function (pageBtn) {
                }
            });
        }
        ;

        //edit
        function typeformatter(cellvalue, options, rowObject) {
            var select = "<a href=\"/credit/assets/edit.html?id=" + rowObject.id + "\">" + rowObject.id + "</a>";
            return select;
        }


        function actionFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" data-toggle="tooltip" title="Like"><i class="glyphicon glyphicon-heart"></i></a>　',
                '<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
                '<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
            ].join('');
        }

        window.actionEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .edit': function (e, value, row, index) {
                alert('You click edit icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .remove': function (e, value, row, index) {
                alert('You click remove icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            }
        };
        function detailFormatter(index, row) {
            var html = [];
            $.each(row, function (key, value) {
                html.push('<p><b>' + key + ':</b> ' + value + '</p>');
            });
            return html.join('');
        }
        // 新增
        function createAction() {
            $.confirm({
                type: 'dark',
                animationSpeed: 300,
                title: '新增系统',
                content: $('#createDialog').html(),
                buttons: {
                    confirm: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            $.alert('确认');
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
        // 编辑
        function updateAction() {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                $.confirm({
                    type: 'blue',
                    animationSpeed: 300,
                    title: '编辑系统',
                    content: $('#createDialog').html(),
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button',
                            action: function () {
                                $.alert('确认');
                            }
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            }
        }
        // 删除
        function deleteAction() {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                $.confirm({
                    type: 'red',
                    animationSpeed: 300,
                    title: false,
                    content: '确认删除该系统吗？',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button',
                            action: function () {
                                var ids = new Array();
                                for (var i in rows) {
                                    ids.push(rows[i].systemId);
                                }
                                $.alert('删除：id=' + ids.join("-"));
                            }
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            }
        }
    </script>
</body>
</html>